images manipulation
revision: February 26, 2025
Content
drag images and HTML elements
top
common code
<style>
.frame{width: 80vw; height: 40vw; border: 0.2vw solid lightgrey;}
.draggable {cursor: move; position: absolute; -webkit-user-select: none; user-select: none; color: red; align-items: center; display: flex;
justify-content: center; border: 0.2vw solid blue;}
.dragme{position:relative; width: 20vw; height: 16vw; cursor: move;}
</style>
smooth drag with pure JavaScript
<div>
<div id="draggable" class="dragme">"Hello World!"</div>
<img src="../images/1.jpg" alt="drag-and-drop image script"
title="drag-and-drop image script" class="dragme">
</div>
<style>
.dragme{position:relative; width: 20vw; height: 16vw; cursor: move;}
#draggable {background-color: #ccc; border: 0.1vw solid #000;}
</style>
<script>
function startDrag(e) {
// determine event object
if (!e) {
var e = window.event;
}
if(e.preventDefault) e.preventDefault();
// IE uses srcElement, others use target
var targ = e.target ? e.target : e.srcElement;
if (targ.className != 'dragme') {return};
// calculate event X, Y coordinates
offsetX = e.clientX;
offsetY = e.clientY;
// assign default values for top and left properties
if(!targ.style.left) { targ.style.left='0px'};
if (!targ.style.top) { targ.style.top='0px'};
// calculate integer values for top and left properties
coordX = parseInt(targ.style.left);
coordY = parseInt(targ.style.top);
drag = true;
// move div element
document.onmousemove=dragDiv;
return false;
}
function dragDiv(e) {
if (!drag) {return};
if (!e) { var e= window.event};
var targ=e.target?e.target:e.srcElement;
// move div element
targ.style.left=coordX+e.clientX-offsetX+'px';
targ.style.top=coordY+e.clientY-offsetY+'px';
return false;
}
function stopDrag() {
drag=false;
}
window.onload = function() {
document.onmousedown = startDrag;
document.onmouseup = stopDrag;
}
</script>
draggable HTML element
code:
<div class="frame">
<div id="mydiv">
<div id="mydivheader">Click here to move</div>
<p>Move</p>
<p>this</p>
<p>DIV</p>
</div>
</div>
<style>
.frame{width: 40vw; height: 30vw; border: 0.2vw solid transparent;}
#mydiv { position: absolute; z-index: 9; background-color: #f1f1f1;
border: 0.2vw solid #d3d3d3; text-align: center; }
#mydivheader {padding: 10px; cursor: move; z-index: 10; background-color: #2196F3;
color: #fff;}
</style>
<script>
// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
draggable img element
code:
<div>
<div class="frame">
<img id="dragMe_1" class="draggable" src="../images/6.jpg"
alt="sailing" width="400px" height="auto">
</div>
<script>
let x = 0, y = 0;
const ele = document.getElementById('dragMe_1');
const mouseDownHandler = function (e) {
x = e.clientX;
y = e.clientY;
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
const dy = e.clientY - y;
ele.style.top = `${ele.offsetTop + dy}px`;
ele.style.left = `${ele.offsetLeft + dx}px`;
x = e.clientX;
y = e.clientY;
};
const mouseUpHandler = function () {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
ele.addEventListener('mousedown', mouseDownHandler);
</script>
</div>
draggable element with picture
code:
<div>
<img class="draggable" id="dragMe_2"src="../images/4.jpg" alt=""
width="200" height="auto">
<style>
.container {align-items: center; display: flex; justify-content: center; min-height: 32vw;}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
let x = 0; let y = 0;
const ele = document.getElementById('dragMe_2');
const mouseDownHandler = function (e) {
x = e.clientX;
y = e.clientY;
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
const dy = e.clientY - y;
ele.style.top = (ele.offsetTop + dy) + 'px';
ele.style.left = (ele.offsetLeft + dx) + 'px';
x = e.clientX;
y = e.clientY;
};
const mouseUpHandler = function () {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
ele.addEventListener('mousedown', mouseDownHandler);
});
</script>
</div>
draggable HTML img element
code:
<div class="frame">
<div id="zoom_3">
<img src="../images/17.jpg" alt="zoom">
</div>
</div>
<style>
.frame{ width: 30vw; height: 30vw; overflow: auto; border: 0.2vw solid green;
margin-left:10vw;}
#zoom_3 {width: 100%; height: 100%; transform-origin: 0px 0px;
transform: scale(1) translate(0px, 0px); cursor: grab;}
div#zoom_3 > img {width: 100%; height: 100%; }
</style>
<script>
var scale = 1, panning = false, pointX = 0, pointY = 0, start = { x: 0, y: 0 },
zoom = document.getElementById("zoom_3");
function setTransform() {
zoom.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
}
zoom.onmousedown = function (e) {
e.preventDefault();
start = { x: e.clientX - pointX, y: e.clientY - pointY };
panning = true;
}
zoom.onmouseup = function (e) {
e.preventDefault();
panning = false;
}
zoom.onmousemove = function (e) {
e.preventDefault();
if (!panning) {
return;
}
pointX = (e.clientX - start.x);
pointY = (e.clientY - start.y);
setTransform();
}
zoom.onwheel = function (e) {
e.preventDefault();
var xs = (e.clientX - pointX) / scale, ys = (e.clientY - pointY) / scale,
delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
(delta > 0) ? (scale *= 1.2) : (scale /= 1.2);
pointX = e.clientX - xs * scale;
pointY = e.clientY - ys * scale;
setTransform();
}
</script>
scale images
top
using JavaScript to scale an image according to window size
use "document.body.clientWidth" and "document.body.clientHeight"
code:
<div>
<h3>using JavaScript to scale an image according to window size</h3>
<p> use "document.body.clientWidth" and "document.body.clientHeight"</p>
<div><img id="imgTag" src="../images/car2.jpg" width="100%" height="auto" /> </div>
</div>
<script>
function scaleSize(){
document.getElementById("imgTag").style.width = document.body.clientWidth;
document.getElementById("imgTag").style.height = document.body.clientHeight;
}
scaleSize();
</script>
resizing images for a zoom effect
The resizing task takes two functions, which can be inserted directly into the HTML source
code:
<div>
<h3>resizing images for a zoom effect</h3>
<p class="spec">The resizing task takes two functions, which can be inserted directly into
the HTML source with <script> tags or into a standalone JS file.</p>
<div>
<img id="zoom_img" src="../images/car2.jpg" alt="car" title="car" width="100%" height="auto"/>
</div>
<button type="button" onclick="zoomin()"><img src="../images/zoom-in.png" alt="" title="photo"
style="width: 1vw; height: 1vw;">zoom in</button>
<button type="button" onclick="zoomout()"><img src="../images/zoom-out.jpg" alt="" title="photo"
style="width: 1vw; height: 1vw;">zoom out</button>
</div>
<script>
function zoomin(){
var myImg = document.getElementById("zoom_img");
var currWidth = myImg.clientWidth;
if(currWidth >= 700){
alert("You're fully zoomed in!");
} else{
myImg.style.width = (currWidth + 100) + "px";
}
}
function zoomout(){
var myImg_1 = document.getElementById("zoom_img");
var currWidth_1 = myImg_1.clientWidth;
if(currWidth_1 <= 100){
alert("That's as small as it gets.");
} else{
myImg_1.style.width = (currWidth_1 - 100) + "px";
}
}
</script>
scale images onclick/addEventListener
the combination of HTML, CSS, and JavaScript makes cool stuff possible : click and see image scaling
<div>
<p class="spec">the combination of HTML, CSS, and JavaScript makes cool stuff possible : <span> click and see image scaling</span></p>
<div class="photo-container">
<img class="photo" src="../images/car2.jpg" alt="car"/>
<img class="photo" src="../images/cartoon.jpg" alt="cartoon"/>
<img class="photo" src="../images/desk.jpeg" alt="desk"/>
<img class="photo" src="../images/camera.png" alt="camera"/>
</div>
</div>
<style>
.photo-container{display: flex; flex-flow: row nowrap;}
.photo-container img {width: 20vw; height: 20vw; border: 0.2vw outset burlywood; margin-top: 3vw; margin-right: 3vw; cursor: pointer}
span{color: darkolivegreen;}
.scaleImage { animation: scaling-image-animation 5s ease;}
@keyframes scaling-image-animation {
0% { transform: scale(0.5); opacity: 0.8;}
50% {transform: scale(2); }
100% { transform: scale(2.5); transform: rotate(0.5turn);}
}
</style>
<script>
const photos = Array.from(document.querySelectorAll('.photo'));
const scalingImage = (currentPhoto => {
currentPhoto.classList.add("scaleImage");
setTimeout(() => {
currentPhoto.classList.remove('scaleImage');
}, 4500);
})
photos.map((photo) => {
photo.addEventListener('click', Event => {
scalingImage(Event.target);
})
});
</script>
move and flip images
top
<div class="spec">
<h3>move image to the right</h3>
<div>
<form>
<img id = "myImage" src = "../images/car2.jpg" alt="" title="photo" width="100%" height="auto"/>
<p class="spec" style="margin-top: 1vw;">click button below to move the image to right</p>
<input style="margin-left: 2vw;" type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</div>
</div>
<script>
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
if(imgObj.style.left >= 900 + "px"){
alert("far enough!");
}
}
window.onload = init;
</script>
flip images horizontally with JavaScript
flipping an image with JavaScript
code:
<div class="spec">
<h3>flip images horizontally with JavaScript</h3>
<p>flipping an image with JavaScript</p>
<div class="flip">
<img src="../images/car2.jpg" class="car" alt="car" />
</div>
</div>
<style>
.flip{display: flex; flex-direction: row; gap: 1vw;}
.car{width: 20vw; height: 20vw;}
canvas{width:20vw; height: 20vw;}
</style>
<script>
const inputImage = document.querySelector(".car");
if (inputImage.complete) {
flipImage();
}
else {
inputImage.onload = flipImage;
}
function flipImage() {
const outputImage = document.createElement("canvas");
outputImage.width = inputImage.naturalWidth;
outputImage.height = inputImage.naturalHeight;
const ctx = outputImage.getContext("2d");
ctx.scale(-1, 1);
ctx.drawImage(inputImage, -outputImage.width, 0);
inputImage.parentNode.insertBefore(
outputImage,
inputImage.nextElementSibling
);
}
</script>
resolving an image coding issue
top
the image 5px spacing problem
problem : extra 5px spacing at the bottom of a picture.
code:
<div class="container">
<img class="first" src="../images/1.jpg" alt="beach" width="20%" height="20%">
</div>
<style>
.issue{width: 20vw; height: auto; }
.container{width: 20vw; height:20.5vw; background-color:red; margin-left:5vw;}
</style>
4 solutions to solve the image 5px spacing problem
The problem of extra 5px spacing at the bottom of a picture, can be solved in four ways.
1: set "font-size: 0;" to parent element
2: set "display: block;" to img
3: set "vertical-align:bottom" to img
4: set "line-height: 5px;" to parent element
code:
<div class="grid_C">
<div>
<p>1: set "font-size: 0;" to parent element</p>
<div class="container-1"><img class="first" src="../images/1.jpg" alt="beach" ></div>
</div>
<div>
<p>2: set "display: block;" to img</p>
<div class="container-2"><img class="second" src="../images/1.jpg" alt="beach"></div>
</div>
<div>
<p>3: set "vertical-align:bottom" to img</p>
<div class="container-3"><img class="third" src="../images/1.jpg" alt="beach"></div>
</div>
<div>
<p>4: set "line-height: 5px;" to parent element</p>
<div class="container-4"><img class="fourth" src="../images/1.jpg" alt="beach"> </div>
</div>
</div>
<style>
.first{width: 15vw; height: auto; }
.container-1{display: flex; flex-flow: column wrap; width: 15vw; height:auto; background-color:red; margin-left:5vw; font-size:0; }
.second{width: 15vw; height: auto; }
.container-2{width: 15vw; height:auto; background-color:red; margin-left:5vw; }
.container-2 .second{display:block;}
.third{width: 15vw; height: auto; }
.container-3{width: 15vw; height:auto; background-color:red; margin-left:5vw; }
.container-3 .third{vertical-align:bottom;}
.fourth{width: 15vw; height: auto; }
.container-4{width: 15vw; height:auto; background-color:red; margin-left:5vw; line-height: 5px}
</style>
resizing images
top
resize with HTML
resize with CSS
code:
<div class="grid_A">
<div class="spec">
<h3>resize with HTML</h3>
<img src="../images/1.jpg" width="400" height="300" alt="evening" style="margin-left:5vw;">
</div>
<div>
<h3>resize with CSS</h3>
<img class="resize" src="../images/1.jpg" alt="evening" style="margin-left:1vw;">
<img class="resize_a" src="../images/1.jpg" alt="evening" style="margin-left:1vw;">
</div>
</div>
<style>
img.resize{width: 30vw; height: 20vw;}
img.resize_a{max-width: 30%; max-height: 30%;}
</style>
image fit window size
top
vw vs padding
code:
<div >
<div class="box">
<div class="img-container"><img src="../images/1.jpg" alt="evening"></div>
</div>
<div class="box">
<div class="img-container"><img src="../images/2.jpg" alt="beach"></div>
</div>
<div class="box-vw">
<div class="img-container"><img src="../images/3.jpg" alt="bath"></div>
</div>
</div>
<style>
.box, .box-vw {background-color: green;border-radius: 1vw; overflow: hidden;margin-bottom: 1.5vw;}
.box:nth-of-type(2) {width: 26vw; }
.box-vw .img-container {width: 100vw; height: 66.620879vw; padding-bottom: inherit;}
.img-container {width: 100%; height: 0;/* Aspect ratio of picture*/padding-bottom: 66.620879%;}
img {width: 100%;}
</style>
enlarge pictures
top
simple example: mouse over pictures
code:
<div>
<img id="myImage1" src="../images/1.jpg" alt="picture" title="photo" alt="Sample Image" style="width: 300px; cursor: pointer;">
<img src="../images/2.jpg" alt="picture" title="photo" class="one" alt="picture" title="photo"/>
<img src="../images/3.jpg" alt="picture" title="photo" class="two" alt="picture" title="photo"/>
<img src="../images/4.jpg" alt="picture" title="photo" class="one" alt="picture" title="photo"/>
<img src="../images/5.jpg" alt="picture" title="photo" class="two" alt="picture" title="photo"/>
<img src="../images/6.jpg" alt="picture" title="photo" class="one" alt="picture" title="photo"/>
<style>
#example_1 img{width: 10vw; height: 10vw; margin-inline: 1vw;}
.zoomed {transform: scale(1.2); transition: transform 0.25s ease; }
#example_1 .one:hover { height: 12vw; width: 12vw;}
#example_1 .two:hover{ transform:scale(0.5);}
</style>
<script>
document.getElementById('myImage1').addEventListener('mouseover', function() {
this.classList.toggle('zoomed')});
</script>
</div>
multiple photos to enlarge and shrink
code:
<div>
<img src="../images/1.jpg" alt="picture" title="photo"/>
<img src="../images/2.jpg" alt="picture" title="photo"/>
<img src="../images/3.jpg" alt="picture" title="photo"/>
<img src="../images/4.jpg" alt="picture" title="photo"/>
<img src="../images/5.jpg" alt="picture" title="photo"/>
</div>
<style>
#example_2 img {height: 200px; width: 200px; margin: 10px;}
#example_2 img:hover{height: 400px; width: 400px; }
</style>
click to enlarge photos
<div>
<img src="../images/5.jpg" alt="picture" title="photo" height="200px" width="200px"/>
<img src="../images/6.jpg" alt="picture" title="photo" height="200px" width="200px"/>
<img src="../images/7.jpg" alt="picture" title="photo" height="200px" width="200px"/>
<img src="../images/8.jpg" alt="picture" title="photo" height="200px" width="200px"/>
<img src="../images/9.jpg" alt="picture" title="photo" height="200px" width="200px"/>
</div>
<script>
var images_a = document.getElementsByTagName('img');
for (var i = 0; i < images_a.length; i++) {
images_a[i].addEventListener('click', function() {
for (var j = 0; j < images_a.length; j++) {
if (i != j) {
images_a[j].style.transform = 'scale(1)';
}
}
this.style.transform = 'scale(1.3)';
this.style.margin = '40px'
});
}
</script>
move mouse over and click to enlarge the picture
code:
<div id="image-container">
<img src="../images/10.jpg" alt="picture" title="photo" alt="Shanghai" width="25%" height="auto"/>
</div>
<style>
#image-container { position: relative; margin-inline: 2vw; margin-block: 5vw;}
#image-container img {display: block; max-width: 100%;}
#image-container:hover img { transform: scale(1.2); transition: transform 0.4s ease-in-out;}
</style>
<script>
var imgContainer = document.getElementById('image-container');
var img = imgContainer.getElementsByTagName('img')[0];
img.addEventListener('click', function() {
var enlargedImg = document.createElement('img');
enlargedImg.src = img.src;
enlargedImg.style.position = 'absolute';
enlargedImg.style.top = 0;
enlargedImg.style.left = 0;
enlargedImg.style.width = '50%';
imgContainer.appendChild(enlargedImg);
});
</script>
multiple photos to click to enlarge
<main>
<div image-wrapper>
<img src="../images/1a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable>
<div caption><p>holiday 1</p></div>
</div>
<div image-wrapper>
<img src="../images/2a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable>
<div caption><p>holiday 2</p></div>
</div>
<div image-wrapper>
<img src="../images/3a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable>
<div caption><p>holiday 3</p></div>
</div>
<div image-wrapper>
<img src="../images/4a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable>
<div caption><p>holiday 4</p></div>
</div>
<div image-wrapper>
<img src="../images/5a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable>
<div caption><p>holiday 5</p></div>
</div>
<div image-wrapper>
<img src="../images/6a.jpg" alt="picture" title="photo" style="width:210px;height:200px;" alt="Shanghai" previewable>
<div caption><p>holiday 6</p></div>
</div>
</main>
<style>
main {width: 1600px; height:400px; padding: 1px; gap: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;}
/*This is a more detailed style for just the immage wrappers*/
[image-wrapper] {display: flex; flex-direction: column; gap: 15px; padding: 5px; width: 200px; height: 300px; background: #fff;
border-radius: 20px 20px 20px 20px; overflow: hidden; box-shadow: 0 3px 15px hsl(0, 0%, 0%, 0.35); justify-content: center; }
/*This is a more detailed style for all the images within the image wrappers*/
[image-wrapper] img { border-radius: 10px 10px 10px 10px; justify-content: center; cursor:zoom-in;}
/*This is a style for the caption in the image wrapper in general*/
[caption] {display: boarder; padding: 5px; text-align: center; width:180px; background: #add8e6; color: blue; border-radius: 20px 20px; }
/*This is a style of how I want the caption to look like in the image wrapper*/
[image-wrapper] [caption] {text-align:center; }
</style>
<script>
//the `constant` is started and stated
const imageWrappers = document.querySelectorAll('[image-wrapper]');
//a function to show the image sources that are previewable
function showPreview(imgSrc) {
const previewImg = document.createElement('img');
const overlay = document.createElement('div');
//the method that states that `imgSrc` from earlier is supposed to use the image sorces given
previewImg.setAttribute('src', imgSrc);
//how to style the image so that it looks like after it's enlarged
previewImg.style.position = 'fixed';
previewImg.style.left = '50%';
previewImg.style.top = '50%';
previewImg.style.transform = 'translate(-50%, -50%)';
previewImg.style.maxWidth = '90%';
previewImg.style.maxHeight = '80%';
previewImg.style.zIndex = '9999';
//the overlay that will give the background a bit of a blur once an image is enlarged and how the blur will look like
overlay.style.position = 'fixed';
overlay.style.left = '0';
overlay.style.top = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.background = 'rgba(0, 0, 0, 0.5)';
//a new element is created or stored
document.body.appendChild(previewImg);
document.body.appendChild(overlay);
//a method that uses `EventListner`so that everytime the image is clicked, it will close
overlay.addEventListener('click', closePreview);
//a function to remove the new element after any click from the previous line
function closePreview() {
document.body.removeChild(overlay);
document.body.removeChild(previewImg);
//a method that uses `EventListner`so that everytime anywhere is clicked, the enlarged image will disappear or go back to normal
overlay.removeEventListener('click', closePreview);
}
}
//a method that is used to apply/trigger the functions given before that enlarges and removes the enlarged image
imageWrappers.forEach(imageWrapper => {
imageWrapper.addEventListener('click', (event) => {
const img = imageWrapper.querySelector('img');
showPreview(img.getAttribute('src'));
});
});
</script>
enlage picture on hover
code:
<div class="images-container">
<img src="../images/10a.jpg" alt="picture" title="photo" alt="Sample Image" class="hover-image">
</div>
<style>
.images-container {display: inline-block; overflow: hidden; margin-inline: 5vw;}
.hover-image { width: 300px; height: auto; transition: transform 0.3s ease;}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const image = document.querySelector('.hover-image');
image.addEventListener('mouseover', () => {
image.style.transform = 'scale(1.5)';
});
image.addEventListener('mouseout', () => {
image.style.transform = 'scale(1)';
});
});
</script>
click pictures to enlarge, use button to reduce
<div>
<div class="containerForImage">
<img src="../images/5.jpg" alt="picture" title="photo" id="imgThree" onclick="enlargeImg_A()"/>
<img src="../images/7.jpg" alt="picture" title="photo" id="imgFour" onclick="enlargeImg_B()"/>
</div>
<button onclick="resetImg_A()">A</button>
<button onclick="resetImg_B()">B</button>
</div>
<style>
#example_7 img{width: 20vw; height: 12vw;margin-left: 2vw;}
button{width: 4vw; height: 2vw; background-color: lightgreen; margin: 2vw;}
</style>
<script>
img_A = document.getElementById("imgThree");
function enlargeImg_A() {
img_A.style.transform = "scale(1.5)";
img_A.style.transition = "transform 0.25s ease";
}
function resetImg_A(){
img_A.style.transform = "scale(1)";
img_A.style.transition = "transform 0.25s ease";
}
img_B = document.getElementById("imgFour");
function enlargeImg_B() {
img_B.style.width = "50%";
img_B.style.height = "15vw";
img_B.style.transition = "width 0.5s ease";
}
function resetImg_B() {
img_B.style.width = "20vw";
img_B.style.height = "12vw";
img_B.style.transition = "width 0.5s ease";
}
</script>
enlarge and scroll images
top
To enlarge and scroll an image can be achieved by using a combination of CSS animations or JavaScript.
example 1: CSS and JavaScript
code:
div class="imageContainer">
<img id="thisImage" src="../images/1.jpg" alt="Scrollable and Enlargeable Picture" width="600"
height="400"/>
</div>
<style>
.imageContainer {overflow: scroll; width: 80%; height: auto; border: 2px solid #ccc; position: relative;}
#thisImage {transition: transform 0.25s ease;}
</style>
<script>
const firstPhoto = document.getElementById('thisImage');
let scale_A = 1;
firstPhoto.addEventListener('wheel', (event) => {
event.preventDefault();
if (event.deltaY < 0) {
scale_A *= 1.1;
} else {
scale_A /= 1.1;
}
firstPhoto.style.transform = `scale(${scale_A})`;
});
</script>
example 2 : using CSS
code:
<div class="imageContainer2">
<img id="anotherImage" src="../images/1.jpg" alt="Sample Image" class="scrolling-image">
</div>
<style>
.imageContainer2 {width: 50vw; height: 50vh; overflow: hidden; position: relative; }
.scrolling-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
animation: enlargeAndScroll 10s linear infinite; }
/* Keyframes for enlarging and scrolling */
@keyframes enlargeAndScroll {
0% {transform: translate(-50%, -50%) scale(1); }
100% { transform: translate(-50%, -150%) scale(2); /* Adjust scale and translation as needed */}
}
</style>
example 3: using JavaScript
code:
<div class="imageContainer2">
<img src="../images/1.jpg" alt="Sample Image" class="scrolling-image1" id="anotherImage1">
</div>
<style>
.imageContainer2 { width: 50vw; height: 50vh; overflow: hidden; position: relative; }
.scrolling-image1 { position: absolute; top: 50%; left: 50%; transform: translate(-10%, -10%);
transition: transform 50s linear; /* Smooth transitions */}
</style>
<script>
const image1 = document.getElementById('anotherImage1');
let scale1 = 1; // Initial scale
let translateY = 0; // Initial vertical translation
function animateImage() {
scale1 += 0.005; // Gradually increase the scale
translateY -= 1; // Gradually move the image upward
// Apply transformations
image1.style.transform = `translate(-50%, ${translateY}%) scale(${scale1})`;
// Loop the animation
requestAnimationFrame(animateImage);
}
// Start the animation
animateImage();
</script>
zoom-in/zoom-out with mouse wheel
top
CSS - zoom-in/zoom-out on hover
code:
<div>
<div>
<div class="img-hover-zoom zoom_1"><img src="../images/11a.jpg" alt="palace"></div>
<div class="img-hover-zoom zoom_2"><img src="../images/12a.jpg" alt="palace"></div>
<div class="img-hover-zoom zoom_3"><img src="../images/13a.jpg" alt="palace"></div>
</div>
<style>
.img-hover-zoom { width: 30vw; height: 20vw; overflow: hidden;}
.img-hover-zoom img {width: 100%; height: 100%; transition: transform .5s ease;}
.zoom_1:hover img {transform: scale(1.5);}
.zoom_2:hover img {transform: scale(0.5);}
.zoom_3:hover img {transform: scale(1.5); box-shadow: 0.5vw 0.3vw green;}
</style>
</div>
limited zoom-in/zoom-out with mouse wheel
code:
<h3>limited zoom-in/zoom-out with mouse wheel</h3>
<div class="scrollable11">
<div id="image-container11">
<img alt="holidays"src="../images/1.jpg" />
</div>
</div>
<style>
.scrollable11{ width: 20vw; height: 20vw; overflow: auto; border: 0.2vw solid blue;margin-left: 10vw;}
#image-container11 {position: absolute; display: block; height: 20vw; width: 20vw; display: block; text-align: center;}
#image-container11 img {position: relative; max-width: 60%; max-height: 60%; margin-block: 4vw;}
#image-container11 img:hover {cursor: zoom-in;}
</style>
<script>
let currentZoom = 1;
let minZoom = 0.2;
let maxZoom = 5;
let stepSize = 0.2;
let container11 = document.getElementById("image-container11");
document.querySelector('.scrollable11').addEventListener('wheel', function(event) {
event.preventDefault();
let direction = event.deltaY > 0 ? -1 : 1;
zoomImage(direction);
});
function zoomImage(direction){
event.preventDefault();
let newZoom = currentZoom + direction * stepSize;
if (newZoom < minZoom || newZoom > maxZoom) {
return;
}
currentZoom = newZoom;
let image = document.querySelector("#image-container11 img");
image.style.transform = "scale(" + currentZoom + ")";
}
</script>
unlimited zoom-in with mouse wheel, draggable
code:
<div>
<div id="zoom_2">
<img class='zoom_A' src='../images/1.jpg' alt='holiday'
width='555' height='320'/>
<script src="wheelzoom.js"></script>
</div>
<style>
.zoom_A{width: 40%; height: 40%; margin-left: 20vw; }
</style>
<script>
wheelzoom(document.querySelector('img.zoom_A'));
</script>
</div>
zoom image point with mouse wheel
<h3>zoom image point with mouse wheel</h3>
<div class="frame_aa">
<div id="zoom_3a">
<img src="../images/17.jpg" alt="zoom">
</div>
</div>
<style>
.frame_aa{ width: 30vw; height: 30vw; overflow: auto; border: 0.2vw solid green;
margin-left:10vw;}
#zoom_3a {width: 100%; height: 100%; transform-origin: 0px 0px;
transform: scale(1) translate(0px, 0px); cursor: grab;}
div#zoom_3a > img {width: 100%; height: 100%; }
</style>
<script>
var scale_aa = 1, panning = false, pointX = 0, pointY = 0, start = { x: 0, y: 0 },
zoom_aa = document.getElementById("zoom_3a");
function setTransform1() {
zoom_aa.style.transform = "translate(" + pointX + "px, " + pointY + "px)
scale(" + scale_aa + ")";
}
zoom_aa.onmousedown = function (e) {
e.preventDefault();
start = { x: e.clientX - pointX, y: e.clientY - pointY };
panning = true;
}
zoom_aa.onmouseup = function (e) {
e.preventDefault();
panning = false;
}
zoom_aa.onmousemove = function (e) {
e.preventDefault();
if (!panning) {
return;
}
pointX = (e.clientX - start.x);
pointY = (e.clientY - start.y);
setTransform1();
}
zoom_aa.onwheel = function (e) {
e.preventDefault();
var xs = (e.clientX - pointX) / scale_aa, ys = (e.clientY - pointY) / scale_aa,
delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
(delta > 0) ? (scale_aa *= 1.2) : (scale_aa /= 1.2);
pointX = e.clientX - xs * scale_aa;
pointY = e.clientY - ys * scale_aa;
setTransform1();
}
</script>
